﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>登录</title>
    <link href="../Styles/Login.css" rel="stylesheet" />
    <script src="../JS/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnimg").click(function () {
                //获取用户名与密码登录判断
                var $username = $("#username").val();
                var $pwd = $("#upwd").val();
                if ($username.length == 0 || $pwd.length == 0) {

                    $("#loginError").text("用户名或密码不能为空");
                    //用户名密码为空时展示错误提示
                    $("#loginError").show();
                    return;
                }
                //用户名密码不为空时隐藏错误提示
                $("#loginError").hide();
                //展示登录提示
                $("#loginImg").show();
                //通过Ajax调用后台
                $.post("/Handlers/LoginHandler.ashx", { "username": $username, "pwd": $pwd },
                    function (data, status) {
                        if (status = "success") {
                            if (data == 1) {
                                //登录成功则跳转到默认页面
                                location = "/Default.aspx";
                            } else if (data == 0) {
                                //用户名密码错误，隐藏登录提示
                                $("#loginImg").hide();
                                $("#loginError").text("用户名或者密码错误");
                                //展示错误提示信息
                                $("#loginError").show();
                            } else {
                                alert(data);
                            }
                        } else {
                            alert("异步提交错误");
                        }
                    })
            })
        })
    </script>


</head>
<body>
    <div class="container">

        <div class="sysTitle">
            喜科堂学员管理系统
        </div>
        <div class="left">
            <img src="../Images/login.png" />
        </div>
        <div class="right">
            <div>
                <div id="loginImg" style="display:none">
                    <img src="../Images/onloading.gif" />正在登录，请稍等。。。。。。
                </div>
                <div id="loginError" style="display:none;color:red">
                    用户名或者密码错误！
                </div>
            </div>


            <form action="" method="post" name="myform">
                <div class="uname">
                    用户名：<input type="text" name="username" id="username" value="" />
                </div>
                <div id="pwd">
                    密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd" id="upwd" />

                </div>
                <div class="">
                    <img src="../Images/btnLogin.png" id="btnimg" />
                </div>
            </form>

        </div>
    </div>
</body>
</html>
